<!-- 左侧列表式模板 -->
<template>
  <div class="template-body">
    <section class="left-side">
      <leftAsideList
        :propsData="propsData"
        :dataList="catList"
        ref="nav"
        @leftNavChange="changeNav"
      ></leftAsideList>
    </section>
    <scroll-view
      scroll-y
      class="template-content"
      :style="{
        borderRadius:
          currentCat.id == catList[0].id ? '0 0 0 0' : '20rpx 0 0 0',
      }"
      id="content"
      @scrolltolower="scrollBottom"
      show-scrollbar="false"
      :scroll-top="scrollTop"
      @scroll="scroll"
      refresher-enabled
      :refresher-triggered="freshing"
      refresher-default-style="none"
      @refresherpulling="refresherpulling"
      @refresherrefresh="refresherrefresh"
      @refresherrestore="showRefresh = false"
    >
      <view class="refresh-box" v-if="showRefresh">
        <i class="iconfont icon-leftbutton-copy"></i>
        <text>向下继续{{ beforeText }}</text>
      </view>
      <view id="list">
        <classifyAd :propsData="propsData"></classifyAd>
        <div class="navList">
          <classifyGoods
            :propsData="propsData"
            :cat="item"
            v-for="item in currentCat.list"
            :key="item.id"
          ></classifyGoods>
        </div>
        <!-- <nextCat :show="true" v-if="currentCat.id != catList[catList.length - 1].id" @nextCat="scrollChangeNav"></nextCat> -->
      </view>
    </scroll-view>
    <bottomToNext
      v-if="showBottomNext && scrollEnd"
      :nextText="nextText"
      @changeNext="scrollChangeNav"
    ></bottomToNext>
  </div>
</template>

<script>
import leftAsideList from "../components/leftAsideList/index.vue";
import classifyAd from "../components/classifyAd/index.vue";
import goodsList from "../components/goodsList/index.vue";
import classifyGoods from "../components/classifyGoods/index.vue";
import bottomToNext from "../components/bottomToNext/index.vue";
import nextCat from "../components/nextCat/index.vue";

export default {
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    catList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  mixins: [],
  components: {
    leftAsideList,
    classifyAd,
    goodsList,
    classifyGoods,
    nextCat,
    bottomToNext,
  },
  data() {
    return {
      // 当前选中的一级导航
      currentCat: {},
      // 滚动条滚动位置
      scrollTop: 0,
      // 滚动位置
      top: 0,
      // 手势起始位置
      goodStart: 0,
      // 手势结束位置
      goodEnd: 0,
      // 滑动盒子高度
      scrollHeight: 0,
      // 滑动条是否到底部
      scrollEnd: false,
      // 是否显示切换下一分类的按钮
      showBottomNext: false,
      // 下一分类名
      nextText: "",
      // 是否在下拉刷新
      freshing: false,
      showRefresh: false,
      beforeText: "",
    };
  },
  mounted() {
    if (this.catList.length > 0) {
      this.$refs.nav.handleTabItem(this.catList[0], 0);
      this.currentCat = this.catList[0];
    }
  },
  watch: {},
  computed: {},
  methods: {
    // 切换一级导航
    changeNav(e) {
      this.currentCat = e;
      this.scrollTop = this.top;
      this.$nextTick(() => {
        this.scrollTop = 0;
        this.scrollEnd = false;
        this.getCurrentBoxHeight();
      });
    },
    // 触底
    scrollBottom() {
      this.scrollEnd = true;
      if (this.currentCat.id == this.catList[this.catList.length - 1].id) {
        return (this.showBottomNext = false);
      }
      let index = this.catList.findIndex((item) => {
        return item.id == this.currentCat.id;
      });
      this.nextText = this.catList[index + 1].name;
      this.showBottomNext = true;
    },
    scroll(e) {
      this.top = e.detail.scrollTop;
    },
    goodTouchstart(e) {
      let start = e.changedTouches[0].pageY;
      this.goodStart = start;
    },
    goodTouchend(e) {
      let end = e.changedTouches[0].pageY;
      this.goodEnd = end;
      if (this.goodStart - this.goodEnd >= 35) {
        if (this.boxHeight <= this.scrollHeight) {
          this.scrollChangeNav();
        } else {
          if (this.scrollEnd) {
            this.scrollChangeNav();
          }
        }
      }
      if (this.goodEnd - this.goodStart >= 35) {
        if (this.boxHeight <= this.scrollHeight) {
          this.scrollLastNav();
        } else {
          if (this.top <= 20) {
            this.scrollLastNav();
          }
        }
      }
    },
    // 切换下一二级分类
    scrollChangeNav() {
      let id = this.currentCat.id;
      if (id == this.catList[this.catList.length - 1].id) {
        return;
      } else {
        let index = this.catList.findIndex((item) => {
          return item.id == id;
        });
        this.$refs.nav.handleTabItem(this.catList[index + 1], index + 1);
        this.showBottomNext = false;
      }
    },
    // 切换上一二级分类
    scrollLastNav() {
      let id = this.currentCat.id;
      if (id == this.catList[0].id) {
        return;
      } else {
        let index = this.catList.findIndex((item) => {
          return item.id == id;
        });
        this.$refs.nav.handleTabItem(this.catList[index - 1], index - 1);
        this.showBottomNext = false;
        setTimeout(() => {
          this.freshing = false;
        }, 200);
      }
    },
    getCurrentBoxHeight() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#list")
        .boundingClientRect((data) => {
          this.boxHeight = data.height;
        })
        .exec();
      query
        .select("#content")
        .boundingClientRect((data) => {
          this.scrollHeight = data.height;
        })
        .exec();
    },
    refresherrefresh() {
      this.freshing = true;
      if (this.currentCat.id == this.catList[0].id) {
        setTimeout(() => {
          this.freshing = false;
        }, 200);
        return;
      }
      this.scrollLastNav();
    },
    refresherpulling() {
      if (this.currentCat.id != this.catList[0].id) {
        let index = this.catList.findIndex((item) => {
          return item.id == this.currentCat.id;
        });
        this.beforeText = this.catList[index - 1].name;
        this.showRefresh = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.template-body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  .left-side {
    width: 202rpx;
    background: #f2f2f2;
    height: 100%;
  }
  .template-content {
    flex: auto;
    width: 0;
    height: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .navList {
      padding: 10rpx 32rpx;
    }
    /deep/.uni-scroll-view::-webkit-scrollbar {
      /* 隐藏滚动条，但依旧具备可以滚动的功能 */
      display: none;
    }
  }
  .template-content::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .refresh-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24rpx 0;
    .iconfont {
      color: #f0250e;
      font-size: 38rpx;
    }
    text {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #262626;
    }
  }
}
</style>
